{{extend name='index/index' /}}
{{block name='mycss'}}
<style>
</style>
{{/block}}
{{block name='main'}}

<hr>


<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-6" style="border: 1px solid #000000;border-radius: 10px;padding: 0px;">
            <!--点击查看私信聊天-->
            <div class="row">
                <div class="col-md-6">
                    <i class="icon-envelope-alt icon-2x" style="padding-left: 10px"></i>
                    <small>私信聊天</small>
                </div>
                <div style="background-color: #F89406;color:#ffffff;height: 40px;line-height: 40px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin-right:0"
                     class="col-md-3 col-md-offset-2" id="show-btn">
                    <i class="icon-comment icon-2x"></i>
                    <small style="padding: 1px;">{{$num}}</small>
                </div>
            </div>
            <div style="display:none" id="myBoard">
                <!--消息内容显示 start-->
                <div class="col-md-12" style="height:300px;background-color: #7dfff7;" id="message">
                    <!--联系人 start-->
                    <div class="contact" style="display:block">
                        <div class="row">
                            <div class="col-md-5" style="font-weight: bold">联系人</div>
                            <div class="col-md-4" style="color: #838383">未读消息个数</div>
                        </div>
                        <div class="row">
                            <div class="col-md-5" style="font-weight: bold">&nbsp;</div>
                            <div class="col-md-4" style="color: #838383"></div>
                        </div>

                        {{volist name='userList' id='v'}}

                        <div class="row">
                            {{if condition="(!$v.nickname)"}}
                            <div class="col-md-5 user"  data-id={{$v.send_id}} style="font-weight: bold;background-color: #ffe45c">系统通知</div>
                            {{else /}}
                            <div class="col-md-5 user" data-id={{$v.send_id}} style="font-weight: bold;background-color: #fed22f">{{$v['nickname']}}</div>
                            {{/if}}
                            <div class="col-md-4" style="color: #838383">{{$v['total']}}</div>
                        </div>

                        {{/volist}}
                        <div class="col-md-2 hide-btn" style="position: absolute;right:10px;bottom: 10px">
                            收起
                        </div>
                    </div>

                    <!--联系人 end-->
                    <!--聊天界面-->
                    <div class="detail" style="display:none">
                        <div class="talk">

                        </div>

                        <!--底部发送消息-->
                        <div class="row" style="position: absolute;bottom: 10px">
                            <div class="col-md-7">
                                <!--发送按钮-->
                                <input type="text" placeholder="请输入内容" class="send-message col-md-7 col-md-offset-1">
                                <input type="button" value="发送" class="col-md-3 send-btn" style="margin: 0;">
                            </div>
                            <div class="col-md-2 hide-btn" style="margin: 0">
                                收起
                            </div>
                            <div class="col-md-2 ret-btn" style="margin: 0">
                                返回
                            </div>
                        </div>
                        <!--底部发送消息-->
                    </div>
                    <!--聊天界面-->
                </div>
                <!--消息内容显示 end-->



            </div>
        </div>
    </div>
</div>
<hr>
{{/block}}
{{block name="mymodal"}}{{/block}}
{{block name="myjs"}}
<script>

    /*聊天框的显示和隐藏*/
    $('#show-btn').click(function () {
        $('#myBoard').css('display', 'block');
    });
    $('.hide-btn').click(function () {
        $('#myBoard').css('display', 'none');
    });
    /*用户点击发送消息*/
    $('.send-btn').click(send);


    /*点击姓名显示用户对话并将未读消息清空*/
    $('.user').click(function(){

        $('.detail').css('display','block');
        $('.contact').css('display','none');
        var node = $(this);
        var receive_id = {{$id}};
        send_id = $(this).attr('data-id'); // NOTICE:此处为全局变量
        var data = {'receive_id':receive_id,'send_id':send_id};
        // 将来自该用户的消息标为已读
        $.ajax({
            type:'post',
            url:'/message/readchange',
            data:data,
            dataType:'json',
            success:function(){
                // 将未读消息个数标为0
                node.next().html(0);
            },
            error:function(){
                // 执行失败
            }
        });
        // 获取当前用户和选中用户的聊天记录
        $.ajax({
            type:'post',
            url:'/message/find',
            data:data,
            dataType:'json',
            success:function(data){
                if(data){
                    // 清空之前聊天记录
                    $('.talk').empty();
                    // 添加最新聊天记录
                    for(var i=data.length-1;i>=0;i--) {
                        if(data[i].receive_id == {{$id}}) {
                            $('.talk').append("<div class='row' style='color:#ffa902'><div class='col-md-offset-1'>"+data[i].message+"</div></div>");
                        } else {
                            $('.talk').append("<div class='row' style='color: #cd0a0a'><div class='col-md-offset-6'>"+data[i].message+"</div></div>");
                        }
                    }
                }
            },
            error:function(){
                //执行失败
            }
        });

    });
    /*点击返回显示用户列表*/
    $('.ret-btn').click(function(){
        $('.detail').css('display','none');
        $('.contact').css('display','block');
        // 清空send_id
        send_id = null;
    });

    /*每5秒查询一次该用户有无新消息*/
    setInterval(refresh, 5000);

    function refresh() {
        // 查询该用户是否有新消息
        $.ajax({
            type:'post',
            url:'/message/refresh/{{$id}}',
            dataType:'json',
            success:function(data) {
                // 如果有新消息
                if(data.length){
                    // 判断当前是否和其他用户聊天
                    if(typeof(send_id) != 'undefined') {
                        for(var i= 0;i<data.length;i++){
                            // 找到当前聊天对象
                            if(data[i].send_id == send_id){
                                // 将新消息添加到对话框中
                                if ( $('.talk').children(":first").length > 8) {

                                    $('.talk').children().remove();
                                }
                                $('.talk').append("<div class='row' style='color:#ffa902'><div class='col-md-offset-1'>"+data[i].message+"</div></div>");
                                // 并将该条消息标为已读
                                mark(data[i]);
                            }
                        }
                    } else {
                        console.log('有'+data.length+'条未读消息');
                    }

                } else {
                    console.log('暂无未读消息');
                }
            },
            error:function() {
            }
        });
    }

// 将该条消息标为已读
    function mark(obj) {
        $.ajax({
            type:'post',
            url:'/message/mark',
            // data:{'receive_id':{{$id}},'send_id':obj.send_id,'send_time':obj.send_time},
            data:{'id':obj.id},
            dataType:'json',
            success:function(data) {
                console.log('该对话对象又来新消息啦');
            },
            error:function() {

            }
        });
    }

    // 按下按键
    document.onkeydown = function (en) {

        var en = en ||window.event;
        if (en.keyCode == 13) {
           if($('.detail').css('display')=='block') {
               send();
           }
        }
    }
    // 发送消息
    function send () {
        // 收集发送信息
        var replayid = {{$id}};
        var uid = send_id;
        var content = $('.send-message').val();
        if (content == '') {
            alert('不能发送空消息!!!!!!!!!!');
            return false;
        }
        $('.send-message').val('');
        var message = {'receive_id': uid, 'message': content, 'send_id': replayid};

        $.ajax({
            type: 'post',
            url: '/message/send',
            data: message,
            dataType: 'json',
            success: function (data) {
                if (data.status) {
                    if(content) {
                        alert('发送成功');
                        if( $('.talk').children().length >8) {

                            $('.talk').children(":first").remove();

                        }
                        $('.talk').append("<div class='row' style='color: #cd0a0a'><div class='col-md-offset-6'>"+content+"</div></div>");
                    } else {
                        alert('发送失败,请重试');
                    }

                } else {
                    // toastr.warning('发送失败');
                }
            },
            error: function () {
                // toastr.error('服务出错,请稍后再试');
            }

        });
    }


</script>
{{/block}}